import React, {Fragment} from 'react'
import {ListItem, ListInfo, LoadMore} from '../style'
import {connect} from 'react-redux';
import {actionCreators} from '../store'
import {Link} from "react-router-dom";

class List extends React.PureComponent {
    render() {
        const {articleList, getMoreArticleList, articlePage} = this.props;
        return (
            <Fragment>
                {articleList.map((item, index) => {
                    return (
                        /*通过参数传递路由*/
                        /*<Link key={index} to={'/detail?id=' + item.get('id')}>*/
                        /* 动态路由*/
                        <Link key={index} to={"/detail/" + item.get('id')}>
                            <ListItem>
                                <img className='pic'
                                     src={item.get('imgUrl')}
                                     alt=""/>
                                <ListInfo>
                                    <h3 className='title'>{item.get('title')}</h3>
                                    <p className='desc'>{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        </Link>)
                })}
                <LoadMore onClick={() => getMoreArticleList(articlePage)}>阅读更多</LoadMore>
            </Fragment>
        )
    }
}

const mapState = (state) => ({
    articleList: state.getIn(['home', 'articleList']),
    articlePage: state.getIn(['home', 'articlePage'])
});
const mapDispatch = (dispatch) => {
    return {
        getMoreArticleList(articlePage) {
            dispatch(actionCreators.getMoreArticleList(articlePage))
        }
    }
};
export default connect(mapState, mapDispatch)(List)
